import React from 'react';
import {Row, Col} from 'antd';
import {
    Menu,
    Icon,
    Tabs,
    message,
    Form,
    Input,
    Button,
    CheckBox,
    Modal,
    Tooltip
} from 'antd';
const FormItem = Form.Item;
const SubMenu = Menu.SubMenu;
const TabPane = Tabs.TabPane;
const MenuItemGroup = Menu.ItemGroup;
import {Router, Route, Link, browserHistory} from 'react-router';
class PCHeader extends React.Component {

    constructor() {
        super();
        this.state = {
            current: 'question',
            modalVisible: false,
            action: 'login_json',
            hasLogined: false,
            userNickName: '',
            userid: 0,
            confirmDirty: false
        }
    }

    componentWillMount() {
        if (localStorage.userid != '') {
            console.log('localStorage userid: ', localStorage.userid);
            // this.setState({hasLogined: true});
            this.setState({userNickName: localStorage.userNickName, userid: localStorage.userid});
        }
    }

    setModalVisible(value)
    {
        this.setState({modalVisible: value})
    }

    handleClick(e) {
        if (e.key == "register") {
            this.setState({current: 'register'})
            this.setModalVisible(true)
        } else {
            this.setState({current: e.key})
        }
    }

    handleSubmit(e) {
        e.preventDefault();
        var formData;
        var myFetchOptions = {
            method: 'GET',
            mode: 'cors'
        };
        this.props.form.validateFields((err, values) => {
                if (!err) {
                    formData = values;
                }
            });
            console.log('Received values of form: ', formData);
            console.log('action: ', this.state.action);
        fetch("http://xxxx/xxxx/index.php?s=/home/user/login_json/username/"+formData.userName+"/password/"+formData.password+".html", myFetchOptions)
            .then(response => response.json()).then(json => {
            this.setState({
                userNickName: json.userNickName,
                userid: json.userid
            });
            localStorage.userid = json.userid;
            localStorage.userNickName = json.userNickName;
        });
        if (this.state.action == 'login_json') {
            this.setState({ hasLogined: true });
        }
        message.success("请求成功！");
        this.setModalVisible(false);
    }

    handleSubmit_2(e) {
        e.preventDefault();
        let formData;
        let myFetchOptions = {
            method: 'GET',
            mode: 'cors'
        };
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                formData = values;
            }
        });
        console.log('Received formData of form: ', formData);
        console.log('action: ', this.state.action);
        // fetch("", myFetchOptions).then(response => response.json()).then(json => {
        // });
    }

    call(key) {
        if (key == 1) {
            this.setState({action: 'login_json'});
        } else if (key == 2) {
            this.setState({action: 'register_json'});
        }
    }

    logout() {
        console.log('logout');
        localStorage.userid = '';
        localStorage.userNickName = '';
        this.setState({hasLogined: false});
    }

    handleConfirmBlur(e) {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }

    checkPassword (rule, value, callback) {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('r_password')) {
            callback('Two passwords that you enter is inconsistent!');
        } else {
            callback();
        }
    }

    checkConfirm (rule, value, callback) {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
            form.validateFields(['r_confirm'], { force: true });
        }
        callback();
    }

    render() {
        let {getFieldDecorator} = this.props.form;
        const userShow = this.state.hasLogined
            ? <SubMenu key="logout" class="register" title={<span><Icon type="setting" />{this.state.userNickName}</span>}>
                    <MenuItemGroup>
                        <Menu.Item key="setting:1">个人中心</Menu.Item>
                        <Menu.Item key="setting:2"><a href="#" onClick={this.logout.bind(this)}>退出</a></Menu.Item>
                    </MenuItemGroup>
                </SubMenu>
            : <Menu.Item key="register" class="register"><Icon type="appstore"/>注册/登录</Menu.Item>;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 14,
                    offset: 6,
                },
            },
        };
        return (
            <header>
                <Row>
                    <Col span={2}></Col>
                    <Col span={4}>
                        <a href="/" class="logo">
                            <img src="./src/images/logo.png" alt="logo"/>
                            <span>ReactTask</span>
                        </a>
                    </Col>
                    <Col span={16}>
                        <Menu
                            mode="horizontal"
                            onClick={this
                            .handleClick
                            .bind(this)}
                            selectedKeys={[this.state.current]}>
                            <Menu.Item key="question">
                                <Icon type="appstore"/>用户问题
                            </Menu.Item>
                            <Menu.Item key="pending">
                                <Icon type="appstore"/>待处理
                            </Menu.Item>
                            <Menu.Item key="suspension">
                                <Icon type="appstore"/>暂缓
                            </Menu.Item>
                            <Menu.Item key="solving">
                                <Icon type="appstore"/>解决中
                            </Menu.Item>
                            <Menu.Item key="solved">
                                <Icon type="appstore"/>已解决
                            </Menu.Item>
                            <Menu.Item key="fankui">
                                <Icon type="appstore"/>反馈用户&问题解决
                            </Menu.Item>
                            {userShow}
                        </Menu>
                        <Modal
                            title="用户中心"
                            wrapClassName="vertical-center-modal"
                            visible={this.state.modalVisible}
                            onCancel={() => this.setModalVisible(false)}
                            onOk={() => this.setModalVisible(false)}
                            okText="关闭">
                            <Tabs
                                type="card"
                                onChange={this
                                .call
                                .bind(this)}>
                                <TabPane tab="登录" key="1">
                                    <Form
                                        horizontal
                                        onSubmit={this
                                        .handleSubmit
                                        .bind(this)}>
                                        <FormItem>
                                            {getFieldDecorator('userName', {
                                                rules: [
                                                    {
                                                        required: true,
                                                        message: 'Please input your username!'
                                                    }
                                                ]
                                            })(
                                                <Input
                                                    prefix={< Icon type = "user" style = {{ fontSize: 13 }}/>}
                                                    placeholder="Username"/>
                                            )}
                                        </FormItem>
                                        <FormItem>
                                            {getFieldDecorator('password', {
                                                rules: [
                                                    {
                                                        required: true,
                                                        message: 'Please input your Password!'
                                                    }
                                                ]
                                            })(
                                                <Input
                                                    prefix={< Icon type = "lock" style = {{ fontSize: 13 }}/>}
                                                    type="password"
                                                    placeholder="Password"/>
                                            )}
                                        </FormItem>
                                        <Button type="primary" htmlType="submit">登录</Button>
                                    </Form>
                                </TabPane>
                                <TabPane tab="注册" key="2">
                                    <Form horizontal onSubmit={this.handleSubmit_2.bind(this)}>
                                        <FormItem 
                                            {...formItemLayout} 
                                            label={(
                                                <span>
                                                    Nickname&nbsp;
                                                    <Tooltip title="What do you want other to call you ?">
                                                        <Icon type="question-circle-o" />
                                                        </Tooltip>
                                                </span>
                                            )} 
                                            hasFeedback>
                                            {getFieldDecorator('r_nickname', {
                                                rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
                                            })(
                                                <Input />
                                            )}
                                        </FormItem>
                                        <FormItem 
                                            {...formItemLayout} 
                                            label="Password" 
                                            hasFeedback>
                                            {getFieldDecorator('r_password', {
                                                rules: [{
                                                    required: true, message: 'Please input you password!',
                                                }, {
                                                    validator: this.checkConfirm.bind(this),
                                                }],
                                            })(
                                                <Input type="password" />
                                            )}
                                        </FormItem>
                                        <FormItem 
                                            {...formItemLayout} 
                                            label="Confirm Password" 
                                            hasFeedback>
                                            {getFieldDecorator('r_confirm', {
                                                rules: [{
                                                    required: true, message: 'Please confirm your password!',
                                                }, {
                                                    validator: this.checkPassword.bind(this),
                                                }],
                                            })(
                                                <Input type="password" onBlur={this.handleConfirmBlur.bind(this)} />
                                            )}
                                        </FormItem>
                                        <FormItem {...tailFormItemLayout}>
                                            <Button type="primary" htmlType="submit" size="large">注册</Button>
                                        </FormItem>
                                    </Form>
                                </TabPane>
                            </Tabs>
                        </Modal>
                    </Col>
                    <Col span={2}></Col>
                </Row>
            </header>
        )
    }
}

export default PCHeader = Form.create({})(PCHeader);
